<template>
  <div class="main">
    <!-- 左侧导航栏 -->
    <div class="leftContainer">
      <navigation></navigation>
    </div>
    <!-- 右侧内容栏 -->
    <div
      class="rightContainer"
      :style="{ 'padding-top': dragBarShow ? '60px' : '0px' }"
    >
      <!-- 窗口控制栏 -->
      <windowControllers></windowControllers>
      <!-- 内容栏 -->
      <div class="mainContext">
        <!-- 链接 -->
        <div class="link" v-show="linkList.length > 1">
          <span style="font-size: 120%; color: #aaaaaa">/</span>
          <div class="linkItem" v-for="(data, index) in linkList" :key="index">
            <div @click="routerChange(data)">{{ data }}</div>
            <div v-show="index != linkList.length - 1">/</div>
          </div>
        </div>
        <div class="linkBar" v-show="linkList.length > 1"></div>
        <!-- 子组件页面 -->
        <component
          :is="componentName"
          class="content"
          :propsData="propsData"
        ></component>
        <!-- 进度面板 -->
        <progress-panel></progress-panel>
        <!-- 文件加载计数 -->
        <div class="loadingCount" v-show="loadingSum != 0">
          {{ loadingCount }}/{{ loadingSum }}
        </div>
      </div>
    </div>
    <!-- 倒卖者名单抽屉 -->
    <el-drawer
      v-model="resellerShow"
      title="倒卖狗名单"
      :with-header="false"
      size="100%"
    >
      <reseller></reseller>
    </el-drawer>
  </div>
</template>

<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import pubsub from "pubsub-js";
import { useStore } from "vuex";
import { ElLoading } from "element-plus";
import { ElNotification } from "element-plus";

import pathApi from "@/api/pathApi.js";
import mainApi from "@/api/mainApi.js";

// 页面
import navigation from "@/views/Nav.vue";
import jersey from "@/views/Jersey.vue";
import setup from "@/views/Setup.vue";
import blacktop from "@/views/Blacktop.vue";
import court from "@/views/Court.vue";
import home from "@/views/Home.vue";
import packing from "@/views/Packing.vue";
import face from "@/views/Face.vue";
import searchResult from "@/views/SearcherResult.vue";
import author from "@/views/Author.vue";
import upload from "@/views/Upload.vue";
import animation from "@/views/Animation.vue";
import scoreborad from "@/views/Scoreborad.vue";
import faceSet from "@/views/FaceSet.vue";

// Mod上传组件
import jerseyUpload from "@/components/uploadModules/jerseyUpload.vue";
import courtUpload from "@/components/uploadModules/courtUpload.vue";
import blacktopUpload from "@/components/uploadModules/blacktopUpload.vue";
import faceUpload from "@/components/uploadModules/faceUpload.vue";
import scoreboardUpload from "@/components/uploadModules/scoreboardUpload.vue";

// 组件
import detail from "@/components/detail.vue";
import packingDetail from "@/components/packingDetail.vue";
import teamSelect from "@/components/teamSelect.vue";
import search from "@/components/search.vue";
import progressPanel from "@/components/progressPanel.vue";
import windowControllers from "@/components/windowControllers.vue";
import reseller from "@/components/reseller.vue";

export default {
  name: "主界面",
  components: {
    search,
    navigation,
    jersey,
    setup,
    blacktop,
    court,
    teamSelect,
    home,
    detail,
    packing,
    packingDetail,
    face,
    searchResult,
    author,
    progressPanel,
    upload,
    windowControllers,
    reseller,
    scoreborad,
    animation,
    jerseyUpload,
    courtUpload,
    blacktopUpload,
    faceUpload,
    scoreboardUpload,
    faceSet,
  },
  data() {
    return {
      componentName: "home",
      // componentName: "upload",
      propsData: {
        contentName: "",
        contentType: "",
        contentAurthor: "",
        folderName: "",
      },
      linkList: ["home"],
      // linkList: ["upload"],
      subList: [],
      loading: {},
      loadingCount: 0,
      loadingSum: 0,
      resellerShow: false,
      dragBarShow: true,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();

    // mod类型记录
    let modType = "";

    // 是否启动倒卖警告
    let dispatchAlert = false;

    onMounted(() => {
      mainApi.writeDailyLog("初始化渲染完成" + "--Main.vue");
      // 倒卖警告
      dispatchAlert && alertList();
      // sub列表
      proxy.subList.push(
        // 路由更新
        pubsub.subscribe("routerChange", (n, data) => {
          // 路径验证
          if (data.linkName != "setup") pathApi.PathValidation();
          console.log(data);
          // mod类型留存
          modType =
            data.picType != undefined
              ? data.picType
              : data.origin_nav != undefined
              ? data.origin_nav
              : modType;
          // 信息传输
          data.origin_nav = modType;
          proxy.propsData = data;
          // 路由链接更新
          routerToward(data);
          // 页面跳转
          proxy.componentName = data.targetComponent;
        }),
        // 选队结果监听
        pubsub.subscribe("teamSelectResult", (n, data) => {
          console.log(data);
          mainApi.writeDailyLog("选队结果监听:" + data + "--Main.vue");
          proxy.componentName = data.moduleName;
          proxy.propsData.propName = data.teamName;
          // proxy.linkList.push(data.moduleName);
          routerToward({
            targetComponent: data.moduleName,
          });
        }),
        // 路由返回
        pubsub.subscribe("routeReturn", (n, data) => {
          proxy.componentName = "teamSelect";
          proxy.propsData.propName = modType;
        }),
        // 加载页面
        pubsub.subscribe("pageLoading", (n, data) => {
          // 启用/关闭加载页面
          if (data) {
            proxy.loading = ElLoading.service();
          } else {
            proxy.loading != {} && proxy.loading.close();
            proxy.loadingSum = 0;
            proxy.loadingCount = 0;
          }
        }),
        // 文件加载进度
        pubsub.subscribe("loadingDataRenew", (n, data) => {
          proxy.loadingSum = data.loadingSum;
          proxy.loadingCount = data.loadingCount;
        }),
        // 倒卖者名单显隐
        pubsub.subscribe("resellerShowControll", (n, data) => {
          proxy.resellerShow = data;
        })
      );
    });

    // 盗卖警告
    function alertList() {
      setTimeout(() => {
        ElNotification({
          title: "打击盗版，人人有责！",
          message:
            "Waigua+仅通过QQ发布,如你从其他渠道(如闲鱼、淘宝)获取,请举报该渠道。",
          duration: 0,
          onClose() {
            pubsub.publish("resellerShowControll", true);
          },
        });
      }, 1000);
    }

    // 路由朝向判断
    function routerToward(data) {
      // 拖动栏显隐
      proxy.dragBarShow = data.targetComponent === "home";
      console.log(proxy.dragBarShow);

      // 导航模块重置
      if (data.isNav) proxy.linkList = ["home"];

      // 朝向判断
      let flag = false;
      proxy.linkList.forEach((element) => {
        if (element === data.targetComponent) flag = true;
      });

      // 父元素下标
      let index = proxy.linkList.indexOf(data.targetComponent);
      flag
        ? // 通向父路由
          proxy.linkList.splice(index + 1, proxy.linkList.length - index + 1)
        : // 通向子路由
          proxy.linkList.push(data.targetComponent);

      // console.log(proxy.linkList);
    }

    // 路由变更
    function routerChange(data) {
      //  判断是否是最后一个路由
      let isLast = proxy.linkList.indexOf(data) === proxy.linkList.length - 1;
      // console.log(data, isLast);
      //  不响应重复跳转至末端路由
      if (isLast) return;

      // 选队类路由响应
      if (data === "court" || data === "jersey") {
        // console.log("球队类响应");
        mainApi.writeDailyLog(
          "选队类路由响应：" + store.state.routeData + "--Main.vue"
        );
        pubsub.publish("teamSelectResult", store.state.routeData);
      }
      // 普通路由响应
      else {
        // console.log("普通响应");
        mainApi.writeDailyLog("普通路由响应：" + data + "--Main.vue");
        pubsub.publish("routerChange", {
          linkName: data,
          componentName: data,
          targetComponent: data,
        });
      }

      if (data != "teamSelect" && data != "detail") {
        mainApi.writeDailyLog("模块选择：" + data + "--Main.vue");
        pubsub.publish("moduleSelect", { target: data });
      }
    }

    return {
      routerChange,
    };
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
@import "../less/variables.less";
.main {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  > .leftContainer {
    background-color: #f0f3f6;
    flex: 0 0 200px;
    position: relative;
  }
  > .rightContainer {
    position: relative;
    background-color: #f7f9fc;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    // -webkit-app-region: drag;

    > .mainContext {
      flex: 1;
      overflow-y: auto;
      padding: 0 1.5%;

      .link {
        width: 100%;
        position: fixed;
        z-index: 99;
        background-color: #f7f9fc;
        height: 30px;
        display: flex;
        align-items: center;
        font-size: 80%;
        padding: 0.5% 0;

        > .linkItem {
          > * {
            display: inline-block;
            margin: 0 5px;
          }
          > div:last-child {
            font-weight: normal;
            color: #aaaaaa;
          }
          > div:first-child:hover {
            color: #fc3d49;
            cursor: pointer;
          }
        }
        > .routerReturn {
          border-radius: 50%;
          width: 25px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          > img {
            width: 18px;
          }
        }
        > .routerReturn:hover {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }

      .linkBar {
        width: 100%;
        height: 30px;
        background-color: #f7f9fc;
        // border: @border;
        height: 30px;
        display: flex;
        align-items: center;
        font-size: 80%;
        padding: 0.5% 0;
        // -webkit-app-region: drag;
      }

      .loadingCount {
        color: @red;
        position: absolute;
        top: 0%;
        left: 0%;
        z-index: 9999;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    > .dragBar {
      display: none;
      height: 60px;
      width: 85%;
      // -webkit-app-region: drag;
    }
  }
}

.progressPanel {
  position: absolute;
  z-index: 99;
  top: 5%;
  right: 2%;
}

/* 滚动条宽度 */
.mainContext::-webkit-scrollbar {
  width: 12px;
}

/* 滚动条轨道 */
.mainContext::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 滚动条滑块 */
.mainContext::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 3px solid #f1f1f1; /* 可选：设置滑块边框 */
}
</style>
